<template>
    <div class="chart-index">
        <Chart :cdata="cdata"/>
    </div>
</template>

<script>
import Chart from './chart.vue';

export default {
    data() {
        return {
            first: true,
            drawTiming: null,
            level: ['一级体', '二级体', '三级体', '四级体', '五级体', '六级体', '七级体', '八级体', '九级体'],
            cdata: [],
            stepStatus: ['success', 'process', 'error'],
            exStep: {
                name: '任务号：15-21003  图号：10-00  名称：二级体',
                active: 0,
                steps: [
                    {
                        name: '原材料入场',
                        status: 'success',
                    },
                ],
            },
        };
    },
    props: {
        intervalDuration: {
            type: Number,
            default: () => (6000)
        },
        enableInterval: {
            type: Boolean,
            default: true,
        },
    },
    components: {
        Chart,
    },
    mounted() {
    },
    beforeDestroy() {
        clearInterval(this.drawTiming);
    },
    methods: {
        // 根据自己的业务情况修改
        setData(from) {
            let that = this,
                    cdata = [];
            for (let i = 0; i < 3; i++) {
                cdata[i] = {};
                cdata[i].name = `任务号：${that.selfUtils.getRandomNum(0, 9)}${that.selfUtils.getRandomNum(1, 9)}-21${that.selfUtils.getRandomNum(0, 9)}${that.selfUtils.getRandomNum(0, 9)}${that.selfUtils.getRandomNum(1, 9)} 图号：${that.selfUtils.getRandomNum(0, 9)}${that.selfUtils.getRandomNum(1, 9)}-${that.selfUtils.getRandomNum(0, 9)}${that.selfUtils.getRandomNum(1, 9)} 名称：${that.level[that.selfUtils.getRandomNum(0, 8)]}`;
                let stepsLength = that.selfUtils.getRandomNum(5, 30);
                cdata[i].active = that.selfUtils.getRandomNum(0, stepsLength - 1);
                cdata[i].finishedNum = 0;
                cdata[i].steps = [];
                for (let j = 0; j < stepsLength; j++) {
                    cdata[i].steps[j] = {};
                    cdata[i].steps[j].name = `步骤${j + 1}`;
                    cdata[i].steps[j].status = `wait`;
                    if (j < cdata[i].active) {
                        cdata[i].steps[j].status = that.stepStatus[that.selfUtils.getRandomNum(0, 2)];
                    }
                    if (j == cdata[i].active) {
                        cdata[i].steps[j].status = 'process';
                    }
                    // if (cdata[i].active > 0) {
                    //     cdata[i].steps[0].status = 'success';
                    // }
                    if (cdata[i].steps[j].status == 'success') {
                        ++cdata[i].finishedNum;
                    }
                }
            }
            that.cdata = cdata;
            if (from) {
                setTimeout(() => {
                    from.loading = false;
                }, 1000)
            }
        },
    },
    watch: {
        enableInterval: {
            handler(newV) {
                this.selfUtils.drawTimingFn(this, this.intervalDuration, newV, this.first);
            },
            immediate: true,
            deep: true,
        },
        intervalDuration: {
            handler(newV) {
                this.$parent.toggleCountDown();
                this.selfUtils.drawTimingFn(this, newV, this.enableInterval, this.first);
            },
            // immediate: true,
            deep: true,
        }
    },
};
</script>

<style lang="scss" scoped>
</style>